<template>
  <div class="login" >
    <div class="login-top">
      <van-icon name="logo" class="logo-icon"/>
      <h1>{{ $t('platform') }}</h1>
    </div>
    <h2 class="login-label">{{ $t('login.username') }}</h2>
    <van-field
      v-validate="{ required: true}"
      v-model="loginForm.username"
      :placeholder="$t('login.usernamePlaceholder')"
      :error="errors.has('username')"
      clearable
      autofocus
      left-icon="user"
      name="username"
      @keyup.enter.native="handleLogin"
    />

    <h2 class="login-label">{{ $t('login.password') }}</h2>
    <van-field
      v-validate="{ required: true}"
      v-model="loginForm.password"
      :type="passwordType"
      :placeholder="$t('login.passwordPlaceholder')"
      :error="errors.has('password')"
      clearable
      left-icon="lock"
      name="password"
      @keyup.enter.native="handleLogin"
    >
      <van-icon
        slot="icon"
        :name="passwordType=='password'?'password-not-view':'password-view'"
        @click="showPassword"/>
    </van-field>
    <van-cell>
      <van-button
        type="primary"
        block
        @click.native="handleLogin">
        {{ $t('login.logIn') }}
      </van-button>
    </van-cell>
    <div class="copyright"><a href="#" @click="goHome()">{{ $t('company') }}</a>©{{ $t('login.copyright') }}</div>
  </div>
</template>

<script>
const loginForm = process.env.ENV_CONFIG === 'dev'
  ? {
    username: 'admin',
    password: '1'
  } : {
    username: '',
    password: ''
  }
export default {
  data() {
    return {
      passwordType: 'password',
      loginForm: {
        username: loginForm.username,
        password: loginForm.password
      },
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    goHome() {
      window.location.href = 'http://www.bpmhome.cn'
    },
    showPassword() {
      this.passwordType === ''
        ? (this.passwordType = 'password')
        : (this.passwordType = '')
    },
    handleLogin() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.$store.dispatch('loginByUsername', this.loginForm).then(() => {
            let path = '/'
            if (this.redirect) {
              path = '/dashboard'
            }
            this.$router.push({ path: path })
          }).catch((e) => {
          })
        } else {
          this.$toast('请输入用户名或密码')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login{
  .login-top {
    padding-top:40px;
    text-align: center;
    .logo-icon {
      font-size: 60px;
      color: #3598dc;
    }
  }
  .login-label{
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    color: #999;
    padding: 15px;
  }
  .copyright{
    position: absolute;
    left: 15px;
    right: 15px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    bottom: 5px;
    font-weight: 400;
    font-size: 12px;
    color: #999;
  }
}
</style>
